<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body, div {
            margin: 0;
            padding: 0;
        }

        .box {
            margin: 20px auto;
            width: 120px;
            height: 300px;
            background: url("img/tb1.png") no-repeat;
            /*设置运动的原点为顶部中间的位置，这样动画都围绕这个点来实现运动*/
            -webkit-transform-origin: top center;
            transform-origin: top center;

            /*设置运动的初始位置-->左边旋转45deg位置*/
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);

            /*设置css3运动动画*/
            -webkit-animation: move 1s ease infinite;
            animation: move 1s ease infinite;
        }

        /*设置动画运动的关键帧*/
        @-webkit-keyframes move {
            0%, 100% {
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
            }
            50% {
                -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
            }
        }

        @keyframes move {
            0%, 100% {
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
            }
            50% {
                -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
            }
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>